<template>
    <div class="songBar">
        <transition name="tran">
            <div class="nowPlayBox" @click="changeView('show')" v-if="showBar" v-show="!showView">
				<div class="bg" :style="bgIMg"></div>
                <div class="box-left">
                    <!-- 歌曲封面 -->
                    <img :src="nowSong.al.picUrl" alt="">
                </div>
                <div class="box-content">
                    <!-- 歌曲信息 -->
                    <h3>{{nowSong.name}}</h3>
                    <div>
                        <p>
                            <span v-for="(item,index) in nowSong.ar" :key="index">
                                <span>{{item.name}}</span> /
                            </span>
                        </p>
                    </div>
                    
                </div>
                <div class="box-right">
                    <!-- 歌曲播放控制按钮 -->
                    <!-- 上一首 -->
                    <i @click.stop="changeSong('pre')" class="iconfont icon-pre-chapter"></i>
                    <!-- 播放/暂停 -->
                    <i class="iconfont" @click.stop="changeState" :class="playerState=='playing'?'icon-zanting':'icon-start'"></i>
                    <!-- 下一首 -->
                    <i @click.stop="changeSong('next')" class="iconfont icon-next-chapter"></i>
                </div>
            </div>
        </transition>
        <transition name="tran">
			<playview 
			@closeView="changeView('close')" 
			v-show="showView"
			@changeSong="changeSong"></playview>
		</transition>
    </div>
</template>

<script>
import api from "../js/api.js";
import playview from "../components/playView.vue"
    export default {
        data() {
            return {
				// 歌曲背景图
				bgIMg:"",
				showView:false,
            }
        },
		components:{
			playview
		},
        props:[],
        mounted() {
            // window.console.log(this.nowSong);
			this.audio.addEventListener("ended",()=>{
				window.console.log('播放结束,播放下一首')
				this.changeSong('nextSong');
			})
        },
		
        computed: {
            nowSong(){
                return this.$store.state.musicData;
            },
            showBar(){
                return this.$store.state.musicData.al.id;
            },
            playerState(){
                return this.$store.state.playerData;
            },
            playLrc(){
                return this.$store.state.Mp3Lrc;
            }
        },
		created() {
			this.bgIMg = "background-image: url("+this.$store.state.playUrl+");"
		},
		updated(){
			this.bgIMg = "background-image: url("+this.$store.state.playUrl+");"
			// window.console.log(this.bgIMg)
		},
        methods: {
			changeView(type){
				type == 'close'?this.showView = false:this.showView = true;
			},
			changeState(){
				if(this.playerState == "playing"){ 
					this.audio.pause();
					// this.$store.commit("changePlayerState",'pause');
				}else{
					this.audio.play();
					// this.$store.commit("changePlayerState",'playing');
				}
			},
			changeSong(type){//上一首 下一首
				window.console.log(type)
				if(type == 'pre'){
					this.$store.commit('preSong');
				}else{
					this.$store.commit('nextSong');
				}
				let playlist = this.$store.state.playList;
				let playIndex = this.$store.state.playIndex;
				let audioUrl = "https://music.163.com/song/media/outer/url?id="+playlist[playIndex]+".mp3";
				this.audio.playAudio(audioUrl);

                window.console.log(playlist[playIndex])
                // 将当前歌曲详情提交到vuex中
                this.axios({
                    url:api.songDetail+`?ids=${playlist[playIndex]}`
                }).then(res=>{
                    window.console.log(res.data.songs[0])
                    this.$store.commit("setMp3data",res.data.songs[0])
                    this.$store.commit("setUrldata",res.data.songs[0].al.picUrl)
                    return this.axios({url:api.lyric+res.data.songs[0].id})
                }).then(res=>{
                    // window.console.log(res.data.lrc.lyric)
                    this.$store.commit("setMp3Lrc",res.data.lrc.lyric)
                        return this.axios({url:api.lyric+playlist[playIndex]})
                }).then(res=>{
                    // window.console.log(res.data.lrc.lyric)
                    // this.$store.commit("setMp3Lrc",res.data.lrc.lyric);
                    //将文本分隔成一行一行，存入数组
                    var lines = res.data.lrc.lyric.split('\n');
                    // window.console.log(lines)
                    var newLines = [];
                    lines.forEach((item)=> {
                        // window.console.log(item);
                        // substring: 截取字符串
                        var t = item.substring(item.indexOf("[") + 1, item.indexOf("]"));
                        var c = item.substring(item.indexOf("]") + 1, item.length);
                        newLines.push({
                            t: (t.split(":")[0] * 60 + parseFloat(t.split(":")[1])).toFixed(3),
                            c: item.substring(item.indexOf("]") + 1, item.length)
                        });
                        // window.console.log(t,c);
                    });
                    // window.console.log(newLines[0].c)
                    var lrcList = [];
                    newLines.forEach((it)=>{
                        // window.console.log(it)
                        lrcList.push({
                            its:it.c
                        })

                    })
                    window.console.log(lrcList)
                    this.$store.commit("setMp3Lrc",lrcList);
                })
				//将当前播放音频下标存入vuex,
				// this.$store.commit("setPlayId",this.songId);
			},
		},
    }
</script>

<style lang="scss" scoped>
// 动画开始前 和 结束时刻
.tran-enter,.tran-leave-to{
    // position: fixed;
    // bottom: 0;
    transform: translateY(0%)
}
// 元素进场时 和 元素离场时
.tran-enter-active,.tran-leave-active{
    transform: translateY(100%)
}
.songBar{
    .nowPlayBox{
        width: 100%;
        height: 40px;
        font-size: 10px;
        color: white;
        background-color: rgba(255,255,255,0.8);
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        transition: all 0.5s;
		overflow: hidden;
        i{
            font-size: 20px;
            &:nth-of-type(2){
                font-size: 30px;
            }
        }
		.bg{
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			z-index: 1;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 50%;
			// filter: blur(20px);
			filter: brightness(0.7);
			transform: scale(1);
			&::after {
				content: " ";
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				z-index: 1;
				background-color: rgba(0,0,0,.25);
			}
		}
        .box-left{
            width: 30px;
            height: 30px;
			border: 1px solid red;
            border-radius: 50%;
            overflow: hidden;
            margin: 5px 10px;
			position: relative;
			z-index: 2;
            img{
                width: 100%;
            }
        }
        .box-content{
            width: 60%;
            display: flex;
            flex-direction: column;
            // align-items: flex-start;
            justify-content: center;
			position: relative;
			z-index: 2;
			text-align: center;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
            h3{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: normal;
            }
            p{
                width: 96%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: normal;
            }
        }
        .box-right{
            width: 25%;
            line-height: 40px;
			padding: 0 10px 0 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
			position: relative;
			z-index: 2;
            i{
                font-size: 25px;
            }
        }
    }
}
</style>